<script setup lang="ts">
import { FolderFilled, FolderOpenFilled, ReloadOutlined } from "@ant-design/icons-vue";
import { hc } from "@/framework/vue/util/render.ts";
import { nextTick, onBeforeMount, ref, shallowRef, watch } from "vue";
import type { LocalProjectItem, LocalProjectType } from "@common/local-project.types.ts";
import PendingButton from "@/components/framework/pending-button.vue";
import ResizeObserver from "@/components/framework/resize-observer.vue";
import CustomIcon from "@/components/framework/icon";
import { useIdeStore } from "@/store/ide/ide-store.ts";
import ProjectTreeItem from "@/modules/local-project/project-tree-item.vue";
import { ProjectIcons } from "@/modules/local-project/config.ts";
import { useProjectStore } from "@/modules/local-project/project-store.ts";
import { useLocalShallowRef } from "@/framework/vue/hooks/state.ts";

/*
 * 搜索本地项目
 * TODO: 显示Jetbrains系列和VSCode最近打开的项目
 */

const ide = useIdeStore();
const project = useProjectStore();

const searchValue = ref("");

const expandedKeys = useLocalShallowRef<string[]>("local-project.expanedKeys", []);
const selectedKeys = shallowRef<string[]>([]);
const treeRef = shallowRef<any>();

onBeforeMount(() => {
  ide.loadLocalIde();
  project.loadProjects();
});

watch(searchValue, value => {
  if (value && project.projects.length > 0) {
    const keys = getExpandedTreeKeys(value);
    if (keys.length > 0) {
      const newKeys = new Set([...expandedKeys.value, ...keys]);
      expandedKeys.value = [...newKeys];
      selectedKeys.value = [value];

      nextTick(() => {
        treeRef.value?.scrollTo({ key: value });
      });
    }
  }
});

const getExpandedTreeKeys = (value: string) => {
  const keys: string[] = [];

  const checkExists = (p: LocalProjectItem) => {
    if (p.key === value) return true;

    if (p.children) {
      for (const c of p.children) {
        if (checkExists(c)) {
          keys.unshift(c.key);
          return true;
        }
      }
    }

    return false;
  };

  for (const p of project.projects) {
    if (checkExists(p)) {
      keys.unshift(p.key);
    }
  }
  return keys;
};
</script>

<template>
  <div class="project-manager full-view">
    <div class="project-list">
      <div class="p-10">
        <div class="flex col-gap-10">
          <div class="flex-1">
            <a-tree-select
              v-model:value="searchValue"
              :tree-data="project.projects"
              :field-names="{ value: 'key', label: 'title' }"
              tree-node-filter-prop="title"
              class="input-search w-full"
              placeholder="搜索项目 . . ."
              search-placeholder="请输入 . . ."
              allow-clear
              show-search
            />
          </div>
          <a-dropdown>
            <pending-button shape="round" :icon="hc(ReloadOutlined)" :fn="project.loadProjects">刷新</pending-button>
            <template #overlay>
              <a-menu>
                <a-menu-item @click="ide.loadLocalIde()">刷新IDE</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
        <div class="mt-10 ph-10 color-text-tertiary">本地项目</div>
      </div>

      <div class="project-list-wrapper">
        <div v-if="project.scanFolders.length > 0" class="h-full overflow-hidden">
          <resize-observer v-slot="{ height }">
            <a-directory-tree
              ref="treeRef"
              :tree-data="project.projects"
              v-model:expanded-keys="expandedKeys"
              v-model:selected-keys="selectedKeys"
              :height="height"
              class="project-tree"
            >
              <template #icon="{ type, expanded }">
                <template v-if="type">
                  <custom-icon :type="ProjectIcons[type as LocalProjectType]" />
                </template>
                <template v-else>
                  <FolderOpenFilled v-if="expanded" style="color: #ffcb40" />
                  <FolderFilled v-else style="color: #ffcb40" />
                </template>
              </template>

              <template #title="{ title, type, dataRef }">
                <span v-if="!type" class="color-text-secondary">{{ title }}</span>
                <project-tree-item v-else :project="dataRef" :ides="ide.locals" />
              </template>
            </a-directory-tree>
          </resize-observer>
        </div>
        <div v-else class="abs-fill flex-center color-text-secondary">请先在设置中配置扫描路径</div>
      </div>
    </div>
    <div></div>
  </div>
</template>

<style lang="less">
//.project-manager {
//  //display: grid;
//  //grid-template-columns: 1fr 1fr;
//}

.project-list {
  overflow: hidden;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;

  .input-search {
    border-radius: 16px;

    .ant-select-selector {
      border-radius: inherit;
    }
  }

  &-wrapper {
    position: relative;
    overflow: auto;
    padding: 0 10px;
  }

  .project-tree {
    background-color: transparent !important;

    .ant-tree-treenode {
      &::before {
        border-radius: var(--border-radius) !important;
      }
    }

    .ant-tree-switcher {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .ant-tree-node-content-wrapper {
      height: 35px;
      display: flex;
      align-items: center;

      > span:first-child {
        display: inline-flex;
        align-items: center;

        .anticon {
          font-size: 18px;
        }
      }

      .ant-tree-title {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
